<template>
  <div class="log-detail p-4">
    <!-- 执行信息卡片 -->
    <div class="execution-info mb-6 bg-white p-4 rounded-lg shadow-md">
      <h2 class="text-lg font-medium mb-4">执行信息</h2>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="日志ID">{{ logInfo.id }}</el-descriptions-item>
        <el-descriptions-item label="接口名称">{{ logInfo.apiName }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ logInfo.startTime }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{ logInfo.endTime }}</el-descriptions-item>
        <el-descriptions-item label="执行耗时">{{ logInfo.duration }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(logInfo.status)">{{ logInfo.status }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="数据量">{{ logInfo.dataCount }}</el-descriptions-item>
        <el-descriptions-item label="执行节点">{{ logInfo.executeNode }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 数据统计 -->
    <div class="data-stats mb-6 bg-white p-4 rounded-lg shadow-md">
      <h2 class="text-lg font-medium mb-4">数据统计</h2>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8">
          <ArtStatsCard
            icon="i-carbon-data-check"
            title="成功处理"
            :count="stats.successCount"
            description="成功处理记录数"
            iconColor="#fff"
            iconBgColor="#67C23A"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <ArtStatsCard
            icon="i-carbon-data-error"
            title="处理失败"
            :count="stats.errorCount"
            description="失败记录数"
            iconColor="#fff"
            iconBgColor="#F56C6C"
          />
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <ArtStatsCard
            icon="i-carbon-time"
            title="平均耗时"
            :count="stats.avgTime"
            description="ms/条"
            iconColor="#fff"
            iconBgColor="#409EFF"
          />
        </el-col>
      </el-row>
    </div>

    <!-- 错误详情 -->
    <div class="error-details mb-6 bg-white p-4 rounded-lg shadow-md">
      <h2 class="text-lg font-medium mb-4">错误详情</h2>
      <ArtTable
        :data="errorList"
        :loading="loading.error"
        :border="true"
        :stripe="true"
      >
        <el-table-column prop="time" label="时间" width="180" />
        <el-table-column prop="phase" label="执行阶段" width="120" />
        <el-table-column prop="type" label="错误类型" width="120">
          <template #default="scope">
            <el-tag type="danger">{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="message" label="错误信息" show-overflow-tooltip />
        <el-table-column prop="data" label="相关数据" show-overflow-tooltip />
      </ArtTable>
    </div>

    <!-- 执行日志 -->
    <div class="execution-log bg-white p-4 rounded-lg shadow-md">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-medium">执行日志</h2>
        <el-button type="primary" @click="handleExportLog">
          <div class="i-carbon-export mr-1"></div>导出日志
        </el-button>
      </div>
      <el-input
        type="textarea"
        v-model="executionLog"
        rows="15"
        readonly
        class="font-mono text-sm"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 日志基本信息
const logInfo = reactive({
  id: 1001,
  apiName: '用户数据同步',
  startTime: '2024-01-20 15:30:00',
  endTime: '2024-01-20 15:35:00',
  duration: '5分钟',
  status: '成功',
  dataCount: '1000条',
  executeNode: 'node-01'
})

// 统计数据
const stats = reactive({
  successCount: 980,
  errorCount: 20,
  avgTime: 125
})

// 加载状态
const loading = reactive({
  error: false
})

// 错误列表
const errorList = ref([
  {
    time: '2024-01-20 15:32:10',
    phase: '数据处理',
    type: '数据格式错误',
    message: '字段类型不匹配: age应为整数类型',
    data: '{"id": 1001, "age": "invalid"}'
  },
  {
    time: '2024-01-20 15:33:25',
    phase: '数据写入',
    type: '主键冲突',
    message: '违反唯一约束: user_id已存在',
    data: '{"user_id": 2001}'
  }
])

// 执行日志
const executionLog = ref(`[2024-01-20 15:30:00] [INFO] 开始执行数据同步任务
[2024-01-20 15:30:01] [INFO] 成功连接源数据库
[2024-01-20 15:30:02] [INFO] 开始读取数据，批次大小：100
[2024-01-20 15:32:10] [ERROR] 数据处理异常：字段类型不匹配
[2024-01-20 15:33:25] [ERROR] 数据写入异常：主键冲突
[2024-01-20 15:34:50] [INFO] 数据同步完成，总处理：1000条
[2024-01-20 15:35:00] [INFO] 任务执行完成`)

// 获取状态标签类型
const getStatusType = (status: string): 'success' | 'warning' | 'info' | 'danger' => {
  const statusMap: Record<string, 'success' | 'warning' | 'info' | 'danger'> = {
    '成功': 'success',
    '失败': 'danger',
    '运行中': 'warning'
  }
  return statusMap[status] || 'info'
}

// 导出日志
const handleExportLog = () => {
  ElMessage.success('开始导出日志')
}
</script>

<style scoped lang="scss">
.log-detail {
  :deep(.el-descriptions__label) {
    width: 120px;
  }
}
</style> 